<!--
 * @Author: ZhaoChenGuang
 * @Date: 2025-01-16 11:25:17
 * @Description: 
-->
<script setup>
import { Page, useVbenModal } from '@vben/common-ui';

import { Button, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUsers, resetPwd } from '#/api/index';

const [Modal, modalApi] = useVbenModal({
  onCancel() {
    modalApi.close();
  },
  async onConfirm() {
    const { content } = modalApi.getData();
    try {
      await resetPwd(content.id);
      modalApi.close();
      message.success('操作成功');
    } catch {}
  },
});

const formOptions = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      fieldName: 'username',
      label: '身份证号码',
    },
    {
      component: 'Input',
      fieldName: 'nickname',
      label: '姓名',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { field: 'nickname', title: '用户名' },
    { field: 'username', title: '身份证' },
    { field: 'pwd', title: '密码' },
    { field: 'name', title: '公司' },
    { field: 'createdAt', formatter: 'formatDateTime', title: '录入' },
    // { field: 'updatedAt', formatter: 'formatDateTime', title: '更新时间' },
    {
      field: 'action',
      slots: { default: 'action' },
      title: '操作',
      fixed: 'right',
      width: 100,
    },
  ],
  exportConfig: {},
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await getUsers({
          currentPage: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },

  toolbarConfig: {
    custom: true,
    export: true,
    refresh: { code: 'query' },
    zoom: true,
  },
};

const [Grid] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

const handleReset = (id) => {
  modalApi.setData({ content: { id } }).open();
};
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="用户列表" table-title-help="提示">
      <template #action="{ row }">
        <Button type="link" @click="handleReset(row.id)">重置密码</Button>
      </template>
    </Grid>
    <Modal class="w-[600px]" title="重置密码">
      确认重置该用户密码? 重置后不可撤销,请谨慎操作!
    </Modal>
  </Page>
</template>
